<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site."
    />
    <title>CSShake</title>
    <link
      href="https://fonts.googleapis.com/css?family=Gentium+Basic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Dancing+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" type="text/css" href="csshake.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-okaidia.min.css"
    />
    <script>
      (function (i, s, o, g, r, a, m) {
        i["GoogleAnalyticsObject"] = r;
        (i[r] =
          i[r] ||
          function () {
            (i[r].q = i[r].q || []).push(arguments);
          }),
          (i[r].l = 1 * new Date());
        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
      })(
        window,
        document,
        "script",
        "//www.google-analytics.com/analytics.js",
        "ga"
      );

      ga("create", "UA-48410558-1", "elrumordelaluz.github.io");
      ga("send", "pageview");
    </script>
    <style type="text/css">
      #carbonads {
        --width: 180px;
        --font-size: 14px;
      }

      #carbonads {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
          sans-serif;
        display: block;
        overflow: hidden;
        margin-bottom: 20px;
        max-width: var(--width);
        border-radius: 4px;
        text-align: center;
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1);
        background-color: hsl(0, 0%, 98%);
        font-size: var(--font-size);
        line-height: 1.5;
        color: #4f5152;
      }

      #carbonads a {
        color: inherit;
        text-decoration: none;
      }

      #carbonads a:hover {
        color: inherit;
      }

      #carbonads span {
        position: relative;
        display: block;
        overflow: hidden;
      }

      .carbon-img {
        display: block;
        margin-bottom: 8px;
        max-width: var(--width);
        line-height: 1;
      }

      .carbon-img img {
        display: block;
        margin: 0 auto;
        max-width: var(--width) !important;
        width: var(--width);
        height: auto;
      }

      .carbon-text {
        display: block;
        padding: 0 1em 8px;
        color: #4f5152;
      }

      .carbon-poweredby {
        display: block;
        padding: 10px var(--font-size);
        background: repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 5px,
            hsla(0, 0%, 0%, 0.025) 5px,
            hsla(0, 0%, 0%, 0.025) 10px
          )
          hsla(203, 11%, 95%, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        font-size: 9px;
        line-height: 0;
      }

      @media only screen and (max-width: 40em) {
        #carbonads {
          float: none;
          margin: 0 auto;
          max-width: 330px;
        }
        #carbonads span {
          position: relative;
        }
        #carbonads > span {
          max-width: none;
        }
        .carbon-img {
          float: left;
          margin: 0;
        }

        .carbon-img img {
          max-width: 130px !important;
        }
        .carbon-text {
          float: left;
          margin-bottom: 0;
          padding: 8px 20px;
          text-align: left;
          max-width: calc(100% - 130px - 3em);
        }
        .carbon-poweredby {
          left: 130px;
          bottom: 0;
          display: block;
          width: 100%;
        }
      }

      @media (min-width: 40em) {
        #carbonads {
          position: fixed;
          right: 35px;
          top: 35px;
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="new-banner">
        <a href="https://elrumordelaluz.github.io/reshake/"
          ><strong>reshake</strong><br />CSShake as a React functional
          Component</a
        >
      </div>
      <section class="section home shamrock">
        <div class="glass shake-hard shake-freeze">
          <i class="bubble"></i>
          <i class="bubble big"></i>
          <i class="bubble"></i>
          <i class="bubble big"></i>
          <i class="bubble small"></i>
          <i class="bubble"></i>
          <i class="bubble"></i>
          <i class="bubble small"></i>
          <i class="bubble"></i>
          <i class="bubble small"></i>
          <span class="straw"></span>
        </div>
        <h1 title="v1.7.0">
          CS<span class="shake-constant shake-delay">Shake</span>
        </h1>
        <h4>
          Some CSS classes to <span class="shake-little">move your DOM!</span>
        </h4>
        <div class="arrow shake-vertical-slow shake-constant"></div>
        <script
          async
          type="text/javascript"
          src="//cdn.carbonads.com/carbon.js?serve=CKYIK27N&placement=elrumordelaluzgithubiocsshake"
          id="_carbonads_js"
        ></script>
      </section>
      <section class="section carrot">
        <a href="#classes">
          <h1 id="classes">Classes</h1>
        </a>
        <h4>The basic collection</h4>
        <ul class="previews">
          <li>
            <i class="preview-item shake">
              Bs
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Basic Shake</p>
          </li>
          <li>
            <i class="preview-item shake-slow">
              Ss
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Slow Shake</p>
          </li>
          <li>
            <i class="preview-item shake-little">
              Ls
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Little Shake</p>
          </li>
          <li>
            <i class="preview-item shake-hard">
              Hs
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Hard Shake</p>
          </li>
          <li>
            <i class="preview-item shake-horizontal">
              &#8644;
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Fixed Horizontal</p>
          </li>
          <li>
            <i class="preview-item shake-vertical">
              &#8693;
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Fixed Vertical</p>
          </li>
          <li>
            <i class="preview-item shake-rotate">
              &#8635;
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Fixed Rotation</p>
          </li>
          <li>
            <i class="preview-item shake-opacity">
              Os
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Opacity Shake</p>
          </li>
          <li>
            <i class="preview-item shake-crazy">
              ✌
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Crazy Shake</p>
          </li>
          <li>
            <i class="preview-item shake shake-constant">
              &#8455;
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Constant Shake</p>
          </li>
          <li>
            <i class="preview-item shake shake-chunk shake-constant">
              %
              <span class="flip"></span>
            </i>
            <p class="preview-desc">Chunk Shake</p>
          </li>
        </ul>

        <ul class="previews smalls shake-trigger">
          <li><i class="preview-item small shake-hard"></i></li>
          <li><i class="preview-item small"></i></li>
          <li><i class="preview-item small"></i></li>
          <li><i class="preview-item small shake-slow"></i></li>
          <li><i class="preview-item small"></i></li>
          <li><i class="preview-item small shake-rotate shake-freeze"></i></li>
          <li><i class="preview-item small shake"></i></li>
          <br />
          <li><i class="preview-item small shake-vertical"></i></li>
          <li><i class="preview-item small"></i></li>
          <li>
            <i class="preview-item small shake-vertical shake-freeze"></i>
          </li>
          <li><i class="preview-item small"></i></li>
          <li>
            <i
              class="preview-item small shake-little shake-constant shake-constant--hover"
            ></i>
          </li>
          <li>
            <i class="preview-item small shake-horizontal shake-freeze"></i>
          </li>
          <li><i class="preview-item small shake-crazy shake-freeze"></i></li>
          <li><i class="preview-item small"></i></li>
          <br />
          <li><i class="preview-item small shake-opacity"></i></li>
          <li><i class="preview-item small"></i></li>
          <li>
            <i
              class="preview-item small shake-slow shake-constant shake-constant--hover"
            ></i>
          </li>
          <li><i class="preview-item small shake-hard"></i></li>
          <li><i class="preview-item small"></i></li>
          <li><i class="preview-item small shake-hard"></i></li>
          <li><i class="preview-item small"></i></li>
        </ul>
        <p>
          Launch the animations from the parent with class 'shake-trigger'
          (customizable)
        </p>
        <div class="arrow shake-vertical-slow shake-constant"></div>
      </section>
      <section class="section code amethyst">
        <a href="#install">
          <h1 id="install">Install</h1>
        </a>
        <h4>Get started...</h4>
        <pre
          class="language-bash"
        ><code>$ git clone https://github.com/elrumordelaluz/csshake.git</code></pre>
        <br />
        <h5>or</h5>
        <pre class="language-bash"><code>$ bower install csshake</code></pre>
        <br />
        <h5>or</h5>
        <pre class="language-bash"><code>$ npm i csshake</code></pre>
        <br />
        <h5>
          or <br />
          <a
            href="https://csshake.surge.sh/"
            class="btn shake-vertical-slow shake-constant"
            >Download Center</a
          >
          <br />Download separated files for each shake animation, expanded or
          minified.
        </h5>
        <p>
          <a class="btn" href="https://cdnjs.com/libraries/csshake">
            cdnjs.com
            <span class="badge shake-constant shake-chunk">New</span>
          </a>
        </p>
        <a class="u-mt4" href="#how-to">
          <h1 id="how-to">How to use</h1>
        </a>
        <h4>Include the css file then apply classes to elements</h4>
        <pre
          class="language-markup"
        ><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;csshake.min.css&quot;&gt;
&lt;!-- or from surge.sh --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://csshake.surge.sh/csshake.min.css&quot;&gt;</code></pre>
        <br />
        <pre
          class="language-markup shake"
        ><code>&lt;div class=&quot;shake&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-hard"
        ><code>&lt;div class=&quot;shake-hard&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-slow"
        ><code>&lt;div class=&quot;shake-slow&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-little"
        ><code>&lt;div class=&quot;shake-little&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-horizontal"
        ><code>&lt;div class=&quot;shake-horizontal&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-vertical"
        ><code>&lt;div class=&quot;shake-vertical&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-rotate"
        ><code>&lt;div class=&quot;shake-rotate&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-opacity"
        ><code>&lt;div class=&quot;shake-opacity&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-crazy"
        ><code>&lt;div class=&quot;shake-crazy&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup shake-chunk"
        ><code>&lt;div class=&quot;shake-chunk&quot;&gt;&lt;/div&gt;</code></pre>
        <br />
        <pre class="language-markup shake-trigger">
<code>&lt;ul class=&quot;shake-trigger&quot;&gt;</code>
 <code class="shake-slow">&lt;li class=&quot;shake-slow&quot;&gt;&lt;/li&gt;</code>
<code> &lt;li&gt;&lt;/li&gt;</code>
<code> &lt;li&gt;&lt;/li&gt;</code>
 <code class="shake-hard">&lt;li class=&quot;shake-hard&quot;&gt;&lt;/li&gt;</code>
 <code>&lt;li&gt;&lt;/li&gt;</code>
 <code class="shake">&lt;li class=&quot;shake&quot;&gt;&lt;/li&gt;</code>
<code>&lt;/ul&gt;</code></pre>
        <pre
          class="language-markup"
        ><code>&lt;!-- To include only some csshake animations use this syntax --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;csshake-slow.min.css&quot;&gt;
&lt;!-- or from surge.sh --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://csshake.surge.sh/csshake-slow.min.css&quot;&gt;</code></pre>
        <br />
        <div class="arrow shake-vertical-slow shake-constant"></div>
      </section>

      <section class="section pear">
        <a href="#variations">
          <h1 id="variations">Variations</h1>
        </a>
        <h4>Some things you could add...</h4>
        <ul class="previews bigs">
          <li>
            <i class="preview-item big transp shake-hard shake-freeze" id="pr1">
              <span class="preview-icon">🙊</span>
            </i>
            <p class="preview-desc">Freezed after Shake</p>
          </li>
          <li>
            <i
              class="preview-item big transp shake-hard shake-constant shake-constant--hover"
              id="pr2"
            >
              <span class="preview-icon">🙈</span>
            </i>
            <p class="preview-desc">Constant and stops on :hover</p>
          </li>
        </ul>
        <div class="dropdown">
          <select class="dropdown-select" id="shake-type">
            <option value="" disabled selected>Select a shake</option>
            <option value="shake-hard">Hard Shake</option>
            <option value="shake-slow">Slow Shake</option>
            <option value="shake-little">Little Shake</option>
            <option value="shake-horizontal">Horizontal Shake</option>
            <option value="shake-vertical">Vertical Shake</option>
            <option value="shake-rotate">Rotate Shake</option>
            <option value="shake-opacity">Opacity Shake</option>
            <option value="shake-crazy">Crazy Shake</option>
          </select>
        </div>
        <br />
        <pre class="language-markup"><code>&lt;!-- To shake constant --&gt;
&lt;div class=&quot;shake-slow shake-constant&quot;&gt;&lt;/div&gt;
&lt;!-- and stops on :hover --&gt;
&lt;div class=&quot;shake-slow shake-constant shake-constant--hover&quot;&gt;&lt;/div&gt;</code></pre>
        <pre
          class="language-markup"
        ><code>&lt;!-- Freeze animation at that point when :hover --&gt;
&lt;div class=&quot;shake-crazy shake-freeze&quot;&gt;&lt;/div&gt;</code></pre>
        <div class="arrow shake-vertical-slow shake-constant"></div>
      </section>

      <section class="section scooter">
        <a href="#flexibility">
          <h1 id="flexibility">More flexibility</h1>
        </a>
        <h4>The do-shake @mixin, and so on...</h4>
        <pre><code class="language-css">.my-custom-shake {
  @include do-shake(
        $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
        $h: 5px, /*  {Number} is the max number for random to assign in x axis */
        $v: 5px, /* {Number} is the max number for random to assign in y axis */
        $r: 3deg, /* {Number} is the max number for random rotation */
        $dur: 100ms, /* {Number} is the animation-duration time value */
        $precision: .02, /* {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is $step: 100 * $precision; */
        $opacity: false, 
        $q: infinite, /* {String} is the animation-iteration-count value */
        $t: ease-in-out, /* {String} animation-timing-function value */
        $delay: null, /* {Number} animation-delay time value */
        $chunk: 100%); /* {Number} is the part of the keyframes where apply the animation */
}

/* Example shake-crazy */
.shake-crazy { 
	@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); 
}
</code></pre>
        <div class="arrow shake-vertical-slow shake-constant"></div>
      </section>
      <section class="section dolly dark-txt">
        <a href="#last-words">
          <h1 id="last-words">Last words</h1>
        </a>
        <h4>
          The about, the idea, and the desire to hear from you to improve the
          code...
        </h4>
        <p>
          I had to make a shake animation for a big project. I did it in vanilla
          CSS at the begining.<br />After I finished it I discovered
          <a
            class="shake shake-constant shake-little dib"
            href="http://jackrugile.com/jrumble/"
            >this</a
          >
          cool jQuery plugin by
          <a class="shake dib" href="https://twitter.com/jackrugile"
            >@jackrugile</a
          >.<br />
          Then I started to think I should make this little CSS project.
        </p>
        <a class="btn carrot shake-little" href="http://csshake.surge.sh"
          >Download</a
        >
        <br />
        <a
          class="btn light shake-rotate shake-freeze"
          href="https://github.com/elrumordelaluz/csshake"
          >Fork me on Github</a
        >
        <p>
          <a
            href="https://twitter.com/share"
            data-via="elrumordelaluz"
            class="twitter-share-button"
            >Tweet</a
          >
          <script>
            !(function (d, s, id) {
              var js,
                fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? "http" : "https";
              if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
              }
            })(document, "script", "twitter-wjs");
          </script>
          <iframe
            src="https://ghbtns.com/github-btn.html?user=elrumordelaluz&amp;repo=csshake&amp;type=star&amp;count=true"
            frameborder="0"
            scrolling="0"
            width="106"
            height="20px"
          ></iframe>
        </p>
        <footer>
          Made with &#9829; by
          <a
            class="shake-chunk shake-constant shake-constant--hover dib"
            href="http://twitter.com/elrumordelaluz"
            >@elrumordelaluz</a
          >, using <a href="http://sass-lang.com/">Sass</a>.<br />This site uses
          <a href="http://prismjs.com/">Prism.js</a> by
          <a href="http://twitter.com/LeaVerou">Lea Verou</a>
        </footer>
      </section>
    </div>

    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"
    ></script>
    <script async defer>
      var selector = document.querySelector("#shake-type");
      var pr1 = document.querySelector("#pr1");
      var pr2 = document.querySelector("#pr2");

      var handleChangeShake = function handleChangeShake(e) {
        var regex =
          /shake-(hard|slow|little|horizontal|vertical|rotate|opacity|crazy)/;
        var classToRemove = regex.exec(pr1.classList.value)[0].trim();
        pr1.classList.remove(classToRemove);
        pr1.classList.add(e.target.value);
        pr2.classList.remove(classToRemove);
        pr2.classList.add(e.target.value);
      };

      selector.addEventListener("change", handleChangeShake);
    </script>
  </body>
</html>
